<template>
	<div>
		<div class="userNav">
			<div>
				<div class="dealerImg"></div>
				<div>系统账号管理</div>
				<div id="systemAdd">
					<a href="#/home/systemAdd">
						新建系统账号
					</a>
				</div>
			</div>
			<div id="systemSeek">
				<input type="text" placeholder="输入系统账号开始搜索" v-model="seek" @keyup.enter="submit" />
				<div id="seek" @click="seekY">
					<a href="javascript:;"><img src="../../../static/img/搜索.png" alt="" /></a>
				</div>
			</div>
		</div>
		<!--表格-->
		<div class="main">
			<ul class="listTitle">
				<li>序号</li>
				<li>名称</li>
				<li>联系人</li>
				<li>联系电话</li>
				<li>账号</li>
				<li>操作</li>
			</ul>
			<ul class="dataList" v-for="(user,index) in users">
				<li>{{index + 1}}</li>
				<li :title="user.companyName" style="cursor: default;">{{user.companyName||'-'}}</li>
				<li>{{user.linkman||'-'}}</li>
				<li>{{user.telephone||'-'}}</li>
				<li @click="seeAccount(index)">
					<a href="javascript:;" style="color: #1CAFBA; display:inline-block;width: 100%;height:100%">{{user.account||'-'}}</a>
				</li>
				<li>
					<a href="javascript:;" style="color: #43DCE7;" @click="amend(index)">修改</a>
					<a href="javascript:;" style="color:#E74343;padding-left: 60px;" @click="pillDel(index)">删除</a>
				</li>
			</ul>
            <p class="nullContent" v-show='nullShow'>暂无数据</p>
			<!--分页-->
			<div id="Pagination" v-show="Pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<!--提示框-->
		<div id="tipMsg" v-show="istipMsg">
			<div class="approval-leave-bg">
				<div class="tipBox">
					<div>
						<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
					</div>
					<div>
						<p style="padding:40px 0;text-align: center;width:100%;">你确定要删除该信息吗？删除后将无法恢复。</p>
						<div class="yesNo">
							<input type="button" value="取消" id="yes" @click="cancle">
							<input type="button" value="确定" id="no" @click="pillSure">
						</div>
					</div>
				</div>
			</div>
		</div>		

	</div>
</template>
<script>
	import { mapActions } from 'vuex'
	export default {
		name: 'user',
		data() {
			return {
				users: [

				],
				delId: '',
				pageSize: 10,
				total: 0,
				istipMsg: false,
				// whichComponents:'stockList',
				isiconImg: true,
				isiconImgs: false,
				WistipMsg: false,
				currentPage: 1,
				nullShow: false,
				seek: '',
				Pagination:true
				// loading: true,
			}
		},
		filters: {

		},
		created: function() {
			// 判断用户是否登录
			var userName = sessionStorage.getItem('userName')
			if(!userName) {
				this.WistipMsg = true
			} else {
				// 获取数据
				this.$store.commit('showLoading');
				this.getpill(1)
				var self = this;
				self.systemmanageList({}).then((data) => {
					this.$store.commit('hiddenLoading');
					self.loading = false
					if(data.code == "200") {
						if(data.data.list.length > 0) {
							self.users = data.data.list
						} else {
							self.nullShow = true
							self.Pagination=false
						}
					}
				}).catch(msg => console.log(msg))
			}
		},
		methods: {
			Wconfirm: function() {
				this.WistipMsg = false
				this.$router.push({
					path: '/login'
				})
			},
			seeAccount: function(index) {
				this.delId = this.users[index].id
				this.editData = this.delId
				var edata = JSON.stringify(this.editData)
				localStorage.setItem('edata', edata)
				var url = '/home/systemaccount'
				this.$router.push({
					path: url
				})
			},
			getpill(i = 1) {
				this.$store.commit('showLoading');
				var self = this
				var seekObj = {
					"LIKE_account": self.seek,
				}
				var seekObj = JSON.stringify(seekObj)
				self.systemmanageList({
					pageSize: this.pageSize,
					pageNo: i,
					jsonFilter: seekObj
				}).then((data) => {
					this.$store.commit('hiddenLoading');
					if(data.code === 200) {
						self.total = data.data.count
						self.users = data.data.list
					} else {
						// this.$message(data.message)
					}
				}).catch(msg => console.log(msg));
			},
			// 分页跳转
			handleSizeChange(val, i = 1) {
				var self = this
				self.pageSize = val
				var seekObj = {
					"LIKE_account": self.seek,
				}
				var seekObj = JSON.stringify(seekObj)
				this.systemmanageList({
					pageSize: val,
					pageNo: this.currentPage,
					jsonFilter: seekObj
				}).then((data) => {
					self.total = data.data.count
					self.users = data.data.list
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getpill(this.currentPage)
			},
			//          搜索
			seekY: function(i=1) {
				var self = this
				self.currentPage=1
				var seekObj = {
					"LIKE_account": self.seek,
				}
				var seekObj = JSON.stringify(seekObj)
				this.systemmanageList({
					jsonFilter: seekObj,
					pageNo: self.currentPage,
					pageSize: self.pageSize,
				}).then((data) => {					
					self.users = data.data.list
					self.total = data.data.count
				})
			},
			//    键盘事件
			submit: function() {
				var self = this
				self.currentPage=1
				var seekObj = {
					"LIKE_account": self.seek,
				}
				var seekObj = JSON.stringify(seekObj)
				this.systemmanageList({
					jsonFilter: seekObj,
					pageNo: self.currentPage,
					pageSize: this.pageSize,
				}).then((data) => {
					self.users = data.data.list
					self.total = data.data.count
				})
			},
			pillDel(index) {
				this.istipMsg = true
				this.delId = this.users[index].id
			},
			cancle: function() {
				this.istipMsg = false
			},
			// 确定删除
			pillSure() {
				this.deletesystem({
					id: this.delId
				}).then((data) => {
					if(data.code == 200) {
						this.cancle()
						this.getpill(this.currentPage)
					} else {
						this.cancle()
						this.$message(data.message)
					}
				}).catch(msg => console.log(msg))
			},
			amend(index) {
				this.delId = this.users[index].id
				this.editData = this.delId
				var edata = JSON.stringify(this.editData)
				localStorage.setItem('edata', edata)
				var url = '/home/amendsystem'
				this.$router.push({
					path: url
				})
			},
			...mapActions(['systemmanageList', 'deletesystem', 'seesystem'])
		}
	}
</script>
<style scoped>
	.userNav {
		background-color: #FFFFFF;
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 3px 3px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.userNav>div:nth-child(1) {
		width: 520px;
		height: 25px;
		display: flex;
		margin-left: 35px;
		align-content: center;
	}
	
	.userNav>div:nth-child(1) img {
		width: 25px;
		height: 25px;
	}
	
	.userNav>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT {
		width: 220px;
		display: flex;
		align-items: center;
	}
	
	.userNavT>div:nth-child(1) {
		display: flex;
	}
	
	.userNavT>div:nth-child(1) img {
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}
	
	.userNavT>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT>div:nth-child(2) {
		color: #888;
		font-size: 14px;
		cursor: pointer;
	}
	
	.user {
		position: relative;
	}
	
	a:hover {
		text-decoration: none;
	}
	
	#systemAdd {
		width: 112px;
		height: 32px;
		margin-left: 60px;
		background-color: #43DCE7;
		border-radius: 5px;
		margin-top: -4px;
	}
	
	#systemAdd a {
		display: inline-block;
		width: 112px;
		height: 32px;
		color: #FFFFFF;
		font-size: 14px;
		text-align: center;
		line-height: 32px;
	}
	
	#systemSeek {
		margin-right: 40px;
		position: relative;
		width: 360px;
		height: 32px;
		border: 1px solid #DDDDDD;
		padding-left: 10px;
		border-radius: 5px;
	}
	
	#systemSeek input {
		width: 346px;
		height: 30px;
	}
	
	#seek {
		width: 22px;
		height: 22px;
		position: absolute;
		right: 0px;
		top: 0px;
		left: 320px;
		bottom: 0;
		line-height: 32px;
	}
	
	#systemContent {
		margin-top: 10px;
		background-color: #FFFFFF;
	}
	
	#systemTable {
		width: 100%;
		border: 1px solid #DDDDDD;
	}
	
	#systemTable tr th {
		height: 40px;
		width: 230px;
		text-align: center;
		line-height: 40px;
		color: #999999;
		font-size: 14px;
		border: 1px solid #DDDDDD;
	}
	
	#systemTable tr td {
		height: 56px;
		width: 230px;
		text-align: center;
		line-height: 56px;
		color: #333333;
		font-size: 14px;
		border: 1px solid #DDDDDD;
	}
	
	#Pagination {
		text-align: center;
		margin-top: 50px;
	}
	
	#alter {
		width: 400px;
		height: 200px;
		background-color: red;
		text-align: center;
		line-height: 200px;
		border-radius: 5px;
		margin: auto auto;
		position: relative;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	/*弹出框*/
	
	.tipBox {
		width: 560px;
		height: 200px;
		border-radius: 5px;
		box-shadow: 0 7px 12px #5F5F5F;
		position: fixed;
		z-index: 400;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.tipBox {
		animation: bounce-in .8s;
	}
	
	@keyframes bounce-in {
		0% {
			transform: translateY(-50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.tipBox div:nth-child(1) {
		height: 50px;
		line-height: 50px;
		background: #F49362;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.tipBox>div:nth-child(2) {
		height: 150px;
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.tipBox p {
		margin: 0;
	}
	
	.yesNo input {
		float: right;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.yesNo input {
		width: 80px;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		color: #fff;
	}
	
	.yesNo input:nth-child(2) {
		background: #43dce7;
		margin-right: 20px;
	}
	
	.yesNo input:nth-child(1) {
		background: #999;
	}
	
	.approval-leave-bg {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		overflow: hidden;
		z-index: 300;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}
	/*表格样式*/
	
	.main {
		width: 100%;
		background-color: #fff;
		margin: 10px 0 0;
	}
	
	.listTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #999999;
		font-size: 14px;
		text-align: center;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		box-sizing: border-box;
	}
	
	.dataList {
		width: 100%;
		height: 56px;
		line-height: 56px;
		color: #333333;
		font-size: 14px;
		text-align: center;
		box-sizing: border-box;
	}
	
	.dataList {
		border-bottom: 1px solid #dddddd;
	}
	
	.dataList li,
	.listTitle li {
		border-right: 1px solid #dddddd;
		box-sizing: border-box;
	}
	
	.listTitle li:nth-child(1),
	.dataList li:nth-child(1) {
		width: 9%;
	}
	
	.listTitle li:nth-child(2),
	.dataList li:nth-child(2) {
		width: 18%;
	}
	
	.dataList li:nth-child(2) {
		cursor: pointer;
		padding: 0 5px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.listTitle li:nth-child(3),
	.dataList li:nth-child(3) {
		width: 18%;
	}
	
	.listTitle li:nth-child(4),
	.dataList li:nth-child(4) {
		width: 18%;
	}
	
	.listTitle li:nth-child(5),
	.dataList li:nth-child(5) {
		width: 18%;
	}
	
	.listTitle li:nth-child(6),
	.dataList li:nth-child(6) {
		width: 19%;
		cursor: pointer;
	}
	
	.dataList li:nth-child(6) {
		color: #35C885;
	}
	
	ul {
		margin: 0;
		padding: 0;
	}
	
	li {
		float: left;
	}
	
	.clear {
		clear: both;
	}
	
	.block {
		padding: 30px 24px;
		text-align: center;
	}
	
	.dataList li span {
		cursor: pointer;
	}
	
	.operationOut {
		display: inline-block;
		color: #43DCE7;
		padding: 0 20px;
	}
	
	.operationRecord {
		display: inline-block;
		color: #35C885;
		padding: 0 20px;
	}
	/*消除IE输入框的x号*/
	
	input::-ms-clear {
		display: none;
	}
	
	input::-ms-reveal {
		display: none;
	}
	.dealerImg{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -76px -200px;
	}
</style>